<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf-入门案例</title>
    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css">
</head>
<body>
<div>
    <div class="wd-search">
        <label class="input-group">
            <input class="form-control" id="search-input-name" type="text" placeholder="输入需要查询的学生姓名">
            <button type="button" class="btn btn-success" onclick="searchStudent()">查询</button>
        </label>
    </div>
    <div class="student-op">
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                data-bs-target="#edit-or-add-student-modal" onclick="openDialog('add')">添加学生
        </button>
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add-score-modal">
            录入学生成绩
        </button>
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                data-bs-target="#add-score-beach-modal">
            批量录入成绩
        </button>
    </div>
    <div class="student-table-wrapper">
        <table id="student-list-table" class="table table-hover text-nowrap wd-student-list">
            <thead class="table-light">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<!--编辑或添加学生信息-->
<div class="modal fade edit-or-add-student" id="edit-or-add-student-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h6 class="modal-title">编辑学生信息</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- 模态框内容 -->
            <div class="modal-body">
                <label style="display: none" for="edit-input-id">
                    <input hidden="hidden" id="edit-input-id" type="number" value="0">
                </label>
                <label class="input-group">
                    <span class="input-group-text">姓名</span>
                    <input class="form-control" id="edit-input-name" type="text">
                </label>
                <div class="form-check-inline">
                    <label class="form-check-label" for="radio1">
                        <span>男</span>
                        <input class="form-check-input" type="radio" id="radio1" name="edit-input-gender" value="1">
                    </label>
                    <label class="form-check-label" for="radio2">
                        <span>女</span>
                        <input class="form-check-input" type="radio" id="radio2" name="edit-input-gender" value="0">
                    </label>
                </div>
                <label class="input-group">
                    <span class="input-group-text">年龄</span>
                    <input class="form-control" max="50" oninput="if(value>50)value=50;if (value<0)value=1;"
                           id="edit-input-age" type="number">
                </label>
                <label class="input-group">
                    <span class="input-group-text">备注</span>
                    <textarea class="form-control" id="edit-input-mark" type="text"></textarea>
                </label>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <div class="edit-student-btn">
                    <button id="edit-or-add-student-modal-close" type="button" data-bs-dismiss="modal"
                            class="btn btn-warning btn-sm">取消
                    </button>
                    <button type="button" class="btn btn-danger btn-sm" onclick="dialogConfirm()">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--添加学生成绩-->
<div class="modal fade add-score" id="add-score-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h6 class="modal-title">录入学生成绩</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- 模态框内容 -->
            <div class="modal-body">
                <label class="form-label" for="student-dropdown">
                    <select class="form-select" name="" id="student-dropdown">
                    </select>
                </label>

                <label class="form-label" for="student-dropdown">
                    <select class="form-select" name="" id="course-dropdown">
                    </select>
                </label>

                <label for="student-score">
                    <input max="100"
                           oninput="if(value>100)value=100;if(value<0)value=0"
                           class="form-control"
                           id="student-score"
                           type="number"
                           step="0.1"
                           placeholder="录入成绩">
                </label>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="addScore()">确认添加
                </button>
            </div>
        </div>
    </div>
</div>
<!--成绩批量录入-->
<div class="modal fade add-score-beach" id="add-score-beach-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h6 class="modal-title">录入学生成绩</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- 模态框内容 -->
            <div class="modal-body">
                <label style="width: 100%" for="score-data">
                    <textarea id="score-data" placeholder="请粘贴JSON格式的学生成绩至此"></textarea>
                </label>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="addScoreBeach()">确认添加
                </button>
            </div>
        </div>
    </div>
</div>
<!--查看学生成绩表-->
<div class="modal fade score-table" id="score-table-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h6 class="modal-title">学生成绩表</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- 模态框内容 -->
            <div class="modal-body">
                <table id="student-score-table" class="table">
                    <caption style="caption-side: top;text-align: center"></caption>
                    <thead class="table-light">
                    <tr>
                        <th>科目</th>
                        <th>成绩</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-warning" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--弹出框-->
<div id="alert-box" class="alert alert-warning">
    <strong>type</strong><span>message</span>
</div>
<script type="text/javascript" th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script type="text/javascript" th:src="@{/js/anime.min.js}"></script>
<script type="text/javascript" th:src="@{/js/student.js}"></script>
</body>
</html>